<template>
	<div class="goods-item">
		<div v-if="item.type == 0" class="img-newpersion"></div>
		<div class="img-box">
			<img v-lazy="item.pic" alt="" />
			<div class="mask" v-if="item.surplusNum === 0 || item.receiveStatus === 2">
				<div class="circular-wrap">
					<div class="circular-inner">已抢完</div>
				</div>
			</div>
		</div>
		<div class="goods-content">
			<div class="subsidy-use" v-if="item.type != 0 && item.hasBuy === 1"></div>
			<p class="goods-name">{{ item.title }}</p>
			<div class="discount">
				<div class="coupon" v-if="item.couponMoney != 0">
					<div class="circle-left"></div>
					<div class="circle-right"></div>
					{{ item.couponMoney }}元券
				</div>
			</div>
			<div class="sale">剩余{{ item.surplus }}件</div>
			<!-- <div class="coupon">领{{ item.couponMoney }}元券+首单补贴{{ item.mdMoney | Fixed(2) }}元</div> -->
			<div class="info">
				<div class="price">
					<p class="deal">
						{{ item.type == 0 ? '新人价' : '补贴价' }}<span class="symbol">¥</span
						><span>
							{{ (parseFloat(item.endPrice || 0) - parseFloat(item.mdMoney || 0) - parseFloat(item.tljMoney || 0)) | Fixed(2) }}</span
						>
					</p>
					<p class="original">¥{{ item.price | Fixed(2) }}</p>
				</div>
			</div>
			<!--购买按钮 -->
			<div
				class="buy"
				@click.stop="buyProduct"
				:class="[
					{
						disabled:
							(item.surplus === 0 || item.receiveStatus === 2 || item.receiveStatus === 1 || item.receiveStatus === 3) &&
							item.hasBuy === 0
					}
				]"
			>
				<div class="subsidy">
					<div>{{ item.type == 0 ? '首单补贴' : '补贴金' }}</div>
					<div class="price">¥{{ item.type == 0 ? item.mdMoney : item.tljMoney }}</div>
				</div>
				<div class="copy-tkl">
					<span>
						{{ item.hasBuy === 1 ? '复制淘口令' : '立即抢' }}<van-icon v-if="item.hasBuy === 0" size="15" color="" name="arrow" />
					</span>
				</div>
			</div>
		</div>

		<!--复制成功-->
		<van-popup class="copy-popups" get-container="body" v-model="visible" @close="close">
			<div class="main">
				<p class="title">
					打开【淘宝】购买吧
				</p>
				<p class="time">
					请在
					<van-count-down :time="couponEndtime" format="HH时mm分ss秒" />前购买
				</p>
			</div>
		</van-popup>
		<van-popup class="copy-popup" get-container="body" v-model="visibleTkl" closeable @close="close">
			<div class="main">
				<svg-icon class="icon" iconName="copy-ok"></svg-icon>
				<p class="title">
					淘口令复制成功<br />
					打开【淘宝】购买吧
				</p>
				<p class="time">
					优惠券到期时间<br />
					<van-count-down :time="couponEndtime" format="DD 天 HH 时 mm 分 ss 秒" />
				</p>
			</div>
		</van-popup>

		<van-popup class="comfirm-popup" get-container="body" v-model="visibleComfirm" closeable @close="closeComfirm">
			<div class="main">
				<h2>确认选购本商品？</h2>
				<p class="text"><span>1、</span>免单机会仅有<span>一次</span>，确认后不可更改！</p>
				<p class="text">
					<span>2、</span>下单实付<span>{{ item.mdMoney | Fixed(2) }}</span
					>元，确认收货后返<span>{{ item.mdMoney | Fixed(2) }}</span
					>元
				</p>
				<p class="text"><span>3、不要使用</span>淘红包、集分宝、淘金币 等任何抵扣手段</p>
				<div class="footer">
					<a @click="visibleComfirm = false">考虑一下</a>
					<a class="submit" @click="submit">确认使用</a>
				</div>
			</div>
		</van-popup>

		<!--领取补贴金-->
		<van-popup class="copy-popupss" get-container="body" v-model="visiblesubsidy">
			<div class="main">
				<div class="main-msg">
					该商品已抢完是否使用普通方式购买？
				</div>
				<div class="btn-box">
					<div class="pay-btn-no" @click="visiblesubsidy = false">
						不了
					</div>
					<div class="pay-btn" @click="submitPay">
						购买
					</div>
				</div>
			</div>
		</van-popup>
		<authorize-dig ref="authorizeDig"></authorize-dig>
	</div>
</template>

<script>
import moment from 'moment';
import store from 'store';
import { Dialog, Popup, CountDown } from 'vant';
import { AuthorizeDig } from '@/components';
import { mapGetters } from 'vuex';
export default {
	name: 'ZeroItemtow',
	components: {
		'van-popup': Popup,
		'van-count-down': CountDown,
		AuthorizeDig
	},
	props: {
		item: {
			type: Object
		},
		newPerson: {
			type: Number
		}
	},
	data() {
		return {
			isShowDialog: false,
			visible: false,
			visibleTkl: false,
			visibleComfirm: false,
			tkl: null,
			couponEndtime: 0,
			visiblesubsidy: false
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	created() {
		// 今日时间戳
		let todayTime = moment(moment().format('YYYY-MM-DD 23:59:59')).format('X');

		// 优化券过期时间在今日内使用优惠券过期时间
		if ((parseInt(this.item.couponEndtime) - parseInt(todayTime)) < 0) {
			this.couponEndtime = (parseInt(this.item.couponEndtime) - parseInt(moment().format('X'))) * 1000;
		} else {
			this.couponEndtime = (moment(moment().format('YYYY-MM-DD 23:59:59')).format('X') - parseInt(moment().format('X'))) * 1000;
		}
	},
	methods: {
		buyProduct() {
			if (
				(this.item.surplusNum === 0 || this.item.receiveStatus === 2 || this.item.receiveStatus === 1 || this.item.receiveStatus === 3) &&
				this.item.hasBuy === 0
			) {
				this.$toast('已抢完');
				return false;
			}
			// 已创建淘口令
			if (this.item.hasBuy === 1) {
				let timer = 5000;
				let oldTime = store.get('times');
				if (moment().format('YYYY-MM-DD 00:00:00') == oldTime) {
					timer = 5000;
				} else {
					store.set('times', moment().format('YYYY-MM-DD 00:00:00'));
				}
				window.BestpayHtml5.System.setClipboardContent(
					{
						data: this.item.tkl
					},
					() => {
						this.visibleTkl = true;
						setTimeout(() => {
							this.visibleTkl = false;

							this.close();
						}, timer);
					}
				);
			} else {
				// 优惠券过期校验
				let nowTime = moment(Date.now()).format('YYYY-MM-DD HH:mm:ss');
				let leave = parseInt(this.item.couponEndtime) * 1000 - new Date(nowTime).getTime();
				let min = Math.floor(leave / (60 * 1000));

				// 新人商品需要淘宝授权
				if (this.item.type === 0) {
					if (this.userInfo.tbStatus === 1) {
						if (min > 0 && min <= 120) {
							Dialog.confirm({
								title: '温馨提示',
								message: '亲，你选择的免单商品将在' + min + '分钟后过期，是否确定领用该商品',
								confirmButtonText: '确认使用',
								cancelButtonText: '考虑一下',
								closeOnPopstate: true
							}).then(() => {
								this.visibleComfirm = true;
							});
						} else if (min <= 0) {
							this.$toast('优惠券已过期');
						} else {
							this.visibleComfirm = true;
						}
					} else {
						if (this.userInfo.tbStatus === 2) {
							this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
						}
						if (this.userInfo.tbStatus === 3) {
							this.$toast('授权过期，请重新授权');
						}
						this.$refs.authorizeDig.open('/index');
					}
				} else {
					// Dialog.confirm({
					// 	title: '温馨提示',
					// 	message: '是否确认购买此商品，购买后将不再拥有新人免单权限？',
					// 	confirmButtonText: '确认使用',
					// 	cancelButtonText: '考虑一下',
					// 	closeOnPopstate: true
					// }).then(() => {
						this.submit();
					// });
				}
			}
		},

		submit() {
			let params = {
				...this.item,
				title: this.item.title,
				itemId: this.item.gid,
				mdId: this.item.mdId,
				app: 'yzf'
			};
			this.$service.shopping.goods
				.dayGoodsBuy(params)
				.then(res => {
					if (this.item.type === 0) {
						if (res.tkl) {
							this.tkl = res.tkl;
						} else {
							this.tkl = res.coupon_click_url;
						}
					} else {
						this.tkl = res;
					}

					window.BestpayHtml5.System.setClipboardContent(
						{
							data: this.tkl
						},
						() => {
							this.visibleComfirm = false;
							this.visible = true;
							setTimeout(() => {
								this.visible = false;

								this.close();
							}, 5000);
						}
					);
				})
				.catch(error => {
					console.log(error.code);
					if (error.code == 1003) {
						this.$toast('已抢完');
						this.$emit('refresh');
						return;
					}
					this.$toast(error.message);
				});
		},
		// 普通方式购买
		submitPay() {
			this.item.tljBatchId = '';
			this.item.mdMoney = '';
			let params = {
				...this.item,
				title: this.item.title,
				itemId: this.item.gid,
				mdId: this.item.mdId,
				app: 'yzf'
			};
			this.$service.shopping.goods
				.dayGoodsBuy(params)
				.then(res => {
					if (this.item.type === 0) {
						if (res.tkl) {
							this.tkl = res.tkl;
						} else {
							this.tkl = res.coupon_click_url;
						}
					} else {
						this.tkl = res;
					}

					window.BestpayHtml5.System.setClipboardContent(
						{
							data: this.tkl
						},
						() => {
							this.visibleComfirm = false;
							this.visible = true;
							setTimeout(() => {
								this.visible = false;

								this.close();
							}, 5000);
						}
					);
				})
				.catch(error => {
					this.$toast(error.message);
				});
		},
		close() {
			// 更新用户信息
			this.$store.dispatch('GET_USERINFO');
			// 触发列表刷新
			this.$emit('refresh');
		},
		closeComfirm() {
			this.visibleComfirm = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	display: flex;
	width: 100%;
	position: relative;
	padding: 18px 12px 14px 16px;
	.img-newpersion {
		width: 64px;
		height: 74px;
		background: url('../../../../assets/images/index/special/newpersion.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 30px;
		top: 0px;
		z-index: 1;
	}
	.img-box {
		width: 284px;
		height: 284px;
		margin-right: 14px;
		position: relative;
		border-radius: 20px;
		overflow: hidden;
		img {
			max-width: 100%;
			max-height: 100%;
		}
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
			@include flexBox(center, center);
			.circular-wrap {
				width: 110px;
				height: 110px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				transform: rotate(-24deg);
				@include flexBox(center, center);
				.circular-inner {
					width: 90px;
					height: 86px;
					border: 2px solid $color-white;
					border-radius: 50%;
					font-size: 18px;
					color: $color-white;
					@include flexBox(center, center);
				}
			}
		}
	}
	.goods-content {
		width: calc(100% - 284px - 14px);
		height: 284px;
		flex: 1;
		@include flexBox(space-between, null, column);
		position: relative;
		.subsidy-use {
			position: absolute;
			width: 124px;
			height: 124px;
			background: url('../../../../assets/images/index/special/ubsidy-use.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			right: 10px;
			top: 10px;
		}
		.goods-name {
			text-align: left;
			color: $text-black;
			font-size: 28px;
			@include ellipsis();
		}
		.discount {
			height: 28px;
			display: flex;
			.coupon {
				line-height: 28px;
				padding: 0 18px;
				background: $main-color;
				border-radius: 4px;
				display: inline;
				font-size: 20px;
				color: $color-white;
				position: relative;
				// margin-right: 20px;
			}
			.subsidy {
				line-height: 28px;
				padding: 0 18px;
				background: #ffeed1;
				border-radius: 4px;
				display: inline;
				font-size: 20px;
				color: #925114;
				position: relative;
				margin-left: 20px;
			}
			.circle-left {
				width: 12px;
				height: 12px;
				background: #fff;
				position: absolute;
				border-radius: 50%;
				top: 50%;
				margin-top: -6px;
				left: -6px;
			}
			.circle-right {
				width: 12px;
				height: 12px;
				background: #fff;
				position: absolute;
				border-radius: 50%;
				top: 50%;
				margin-top: -6px;
				right: -6px;
			}
		}
		.sale {
			font-size: 24px;
			font-weight: 400;
			line-height: 34px;
			color: rgba(102, 102, 102, 1);
		}
		.info {
			@include flexBox(space-between, center);
			.num {
				color: $main-color;
				font-size: 28px;
				i {
					color: #f42e39;
					margin-right: 6px;
				}
			}
			.price {
				text-align: right;
				display: flex;
				align-items: center;
				position: relative;
				bottom: -10px;
				.deal {
					font-size: 22px;
					color: $main-color;
					margin-right: 10px;
					display: flex;
					align-items: flex-end;
					.symbol {
						font-size: 24px;
					}
					span {
						font-weight: 600;
						font-size: 30px;
					}
				}
				.original {
					color: #b5b5b5;
					font-size: 24px;
					text-decoration: line-through;
				}
			}
		}
		.buy {
			width: 354px;
			height: 72px;
			background: url('../../../../assets/images/index/special/zero-btn-background.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			color: $color-white;
			font-size: 20px;
			margin-top: 20px;
			// border-radius: 16px;
			@include flexBox(center, center);
			// border: 2px solid rgba(255, 78, 73, 1);
			min-width: 136px;
			overflow: hidden;
			i {
				font-size: 20px;
			}
			.subsidy {
				color: #f10811;
				font-size: 24px;
				width: 150px;
				line-height: 31px;
				text-align: center;
				padding-top: 5px;
				.price {
					font-size: 28px;
				}
			}
			.copy-tkl {
				width: 204px;
				height: 34px;
				line-height: 34px;
				// background: linear-gradient(270deg, rgba(255, 72, 74, 1) 0%, rgba(255, 80, 73, 1) 100%);
				font-size: 28px;
				text-align: center;
				display: block;
				color: #fff;
				@include flexBox(center, center);
				.icon {
					font-size: 22px;
					position: relative;
					top: -1px;
					color: #fff;
				}
				span {
					letter-spacing: 0.5px;
					@include flexBox(center, center);
				}
			}
			.surplus-num {
				font-size: 20px;
				width: 100%;
				height: 34px;
				line-height: 34px;
				border-bottom-left-radius: 16px;
				border-bottom-right-radius: 16px;
				// background-color: #fff;
				color: #ff4e49;
				span {
					width: 100%;
					transform: scale(0.9, 0.9);
					text-align: center;
					display: block;
				}
			}
			&.disabled {
				border-color: #ebebeb;
				background: url('../../../../assets/images/index/special/zero-btn-background-g.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				color: #7b7b7b;
				.subsidy {
					color: #7b7b7b;
				}
				.copy-tkl {
					// background: #ebebeb;
					color: #7b7b7b;
				}
				.surplus-num {
					// color: #7b7b7b;
				}
			}
		}
	}
}
.confirm-popup {
	width: 546px;
	height: 346px;
	border-radius: 12px;
	@include flexBox(space-between, center, column);
	h2 {
		font-size: 32px;
		color: #000;
		margin-top: 48px;
	}
	p {
		font-size: 28px;
		color: #5b5b5b;
		padding: 0 50px;
		margin-top: -20px;
	}
	.footer {
		border-top: 1px solid #f7f7f7;
		height: 102px;
		display: flex;
		width: 100%;
		a {
			width: 50%;
			line-height: 102px;
			text-align: center;
			font-size: 32px;
			display: block;
			&.cancel {
				color: #a3a3a3;
			}
			&.submit {
				color: $main-color;
				border-left: 1px solid #f7f7f7;
			}
		}
	}
}
.copy-popup {
	width: 452px;
	height: 428px;
	border-radius: 16px;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: #2e2d2d;
			text-align: center;
			margin: 30px 0;
		}
		.time,
		.van-count-down {
			font-size: 24px;
			color: #7e7e7e;
			text-align: center;
			line-height: 40px;
		}
	}
}
.comfirm-popup {
	width: 580px;
	border-radius: 16px;
	.main {
		h2 {
			text-align: center;
			font-size: 32px;
			font-weight: 600;
			margin: 30px 0;
			color: #000;
		}
		span {
			color: $color-red;
		}
		.text {
			font-size: 28px;
			color: #5b5b5b;
			padding: 0 40px;
		}
		.tips {
			padding: 0 40px;
			margin-top: 20px;
			text-align: left;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.footer {
			margin-top: 30px;
			border-top: 2px solid #f7f7f7;
			display: flex;
			a {
				width: 50%;
				line-height: 102px;
				font-size: 32px;
				color: #a3a3a3;
				display: block;
				text-align: center;
			}
			.submit {
				color: $main-color;
				border-left: 2px solid #f7f7f7;
			}
		}
	}
}

.copy-popupss {
	width: 100%;
	height: 342px;
	background: transparent;
	text-align: center;
	.main {
		width: 636px;
		height: 342px;
		background: #f24e36;
		background-size: 100% 100%;
		margin: 0 auto;
		border-radius: 16px;
		padding-top: 62px;
		.btn-box {
			display: flex;
			margin-top: 36px;
			justify-content: space-between;
			padding: 0 64px;
			.pay-btn {
				width: 230px;
				height: 94px;
				line-height: 94px;
				background: linear-gradient(180deg, rgba(255, 237, 147, 1) 0%, rgba(253, 182, 38, 1) 100%);
				box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
				border-radius: 48px;
				font-size: 36px;
				font-weight: 500;
				text-align: center;
				color: rgba(242, 73, 56, 1);
				// margin: 0 auto 0 auto;
			}
			.pay-btn-no {
				width: 230px;
				height: 88px;
				line-height: 84px;
				border: 2px solid rgba(252, 148, 129, 1);
				border-radius: 44px;
				font-size: 36px;
				color: #ffd1a3;
			}
		}

		.main-msg {
			// height: 50px;
			font-size: 36px;
			font-weight: 500;
			line-height: 50px;
			color: rgba(250, 228, 128, 1);
			// padding: 50px;
			width: 60%;
			margin: 0 auto;
		}
		.main-msg-tow {
			height: 40px;
			font-size: 28px;
			font-weight: 400;
			line-height: 40px;
			color: rgba(250, 228, 128, 1);
			margin-top: 10px;
		}
	}
}
.copy-popups {
	width: 434px;
	height: 500px;
	border-radius: 16px;
	background: transparent;
	.main {
		width: 100%;
		height: 100%;
		@include flexBox(center, center, column);
		background: url('../../../../assets/images/index/special/grabg.png');
		background-size: 100% 100%;
		svg {
			width: 110px;
			height: 110px;
		}
		.title {
			font-size: 28px;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			margin-top: 350px;
			margin-bottom: 10px;
		}
		.time,
		.van-count-down {
			font-size: 22px;
			color: #7e7e7e;
			text-align: center;
			line-height: 40px;
			font-weight: 400;
			line-height: 26px;
			color: rgba(255, 255, 255, 1);
		}
		.time {
			display: flex;
			letter-spacing: 1px;
		}
	}
}
</style>
